<template>
  <view class="container">
    <view class="head" :style="'height:'+headHeight+'px'">
      <view class="back" :style="'margin-top:'+(statusHeight+bottonMargin)+'px'" @click="goback">
        <IconFont name="rect-left" size="36rpx"></IconFont>
      </view>
      <view class="title" :style="'margin-top:'+statusHeight+'px'">发票详情</view>
    </view>
    <view class="top_nav">
      <view class="outlet"></view>
      <view class="success_info" v-if="billInfo.status=='1'">
        <image src="../../assets/images/invoicing/detail_icon_2.png" mode="scaleToFill"></image>
        <text class="text">待开票</text>
      </view>
      <view class="success_info" v-else-if="billInfo.status=='3' && billInfo.isRed=='0'">
        <image src="../../assets/images/invoicing/detail_icon_1.png" mode="scaleToFill"></image>
        <text class="text">开票完成</text>
      </view>
      <view class="success_info" v-else-if="billInfo.status=='4'">
        <image src="../../assets/images/invoicing/detail_icon_3.png" mode="scaleToFill"></image>
        <text class="text">开票异常</text>
      </view>
      <view class="success_info" v-else-if="billInfo.isRed=='1'">
        <image src="../../assets/images/invoicing/detail_icon_2.png" mode="scaleToFill"></image>
        <text class="text">冲红审核</text>
      </view>
    </view>
    <view class="detail_box">
      <view class="top"></view>
      <view class="row">
        <view class="label">发票类型</view>
        <view class="value">{{billInfo.billType=='1'?'增值税普通发票':'增值税专用发票'}}</view>
      </view>
      <view class="row">
        <view class="label">发票抬头</view>
        <view class="value">{{ billInfo.headTile }}</view>
      </view>
      <view class="row">
        <view class="label">开票运单</view>
        <view class="value">
          <view class="orders" v-for="(item,index) in billInfo.billNoList || []" :key="index">
            <view>{{ item }}</view>
            <view class="order_detail" @click="toOrderDetail(item)">运单详情 ＞</view>
          </view>
        </view>
      </view>
      <view class="row">
        <view class="label">开票金额</view>
        <view class="value">¥{{ billInfo.invoiceMoney || '0.00' }}</view>
      </view>
      <view class="row">
        <view class="label">开票时间</view>
        <view class="value">{{ billInfo.creaTetime }}</view>
      </view>
      <view class="row">
        <view class="label">领取网点</view>
        <view class="value">{{ billInfo.branchName ? billInfo.branchName+'网点' : '-' }}</view>
      </view>
      <view v-if="billInfo.status=='3'" class="downloand" @click="handleDownload">下载发票</view>
      <view v-if="billInfo.status=='1'" class="cancel" @click="handleCancel">取消开票</view>
      <view v-if="billInfo.status=='3' && billInfo.isRed=='0'" class="cancel red" @click="handleReverse">冲红申请</view>
    </view>
    <drawer :show="showReverse" :show-border="false" :title="'冲红申请'" @close="closeReverse" :show-close="true">
      <view class="reverse">
        <nut-textarea v-model="reverseReason" limit-show max-length="100" placeholder="请填写冲红原因，待审核后可冲红哦~" class="reverse_textarea" />
      </view>
      <view class="save">
        <view class="btn" @click="saveReverse">提交申请</view>
      </view>
    </drawer>
  </view>
</template>

<script setup lang="ts">
import { defineComponent, getCurrentInstance, reactive, ref, onMounted } from 'vue';
import Taro, {useDidShow,useRouter} from "@tarojs/taro";
import {IconFont} from "@nutui/icons-vue-taro";
import {$get,$post,$del} from "@/@api";
import useUserInfoStore from "@/store/user";
import useMyOrderStore from "@/store/myOrder";

const router = useRouter()

const showReverse = ref(false)
const reverseReason = ref('')
const userStore = useUserInfoStore()
const orderStore = useMyOrderStore()
const billInfo = ref({})

const handleCancel = ()=>{
  Taro.showModal({
    title: '提示',
    content: '是否确定取消这张发票？',
    success: async (r)=>{
      if(r.confirm){
        const res: any = await $post(
            `/selfmachine-system/invoice/miniCancel`,
            {ssiId:billInfo.value.ssiId}
        )
        if(res.data.code === 200){
          Taro.showToast({
            icon: 'success',
            title: '操作成功'
          })
          Taro.navigateBack()
        }
      }
    }
  })

}

const saveReverse = async () => {
  if(!reverseReason.value){
    Taro.showToast({
      icon: 'none',
      title: '请填写冲红原因'
    })
    return
  }
  const res: any = await $post(
      `/selfmachine-system/invoice/redMark`,
      {
        //customerCode: userStore.userInfo.customerCode,
        invoiceNo: billInfo.value.invoiceNo,
        redRemark: reverseReason.value
      }
  )
  if(res.data.code === 200){
    Taro.showToast({
      icon: 'success',
      title: '操作成功'
    })
    showReverse.value = false
    Taro.navigateBack()
  }

}

const closeReverse = ()=>{
  showReverse.value = false
}

//下载发票
const handleDownload = async ()=>{
  if(billInfo.value.pdfUrl){
    Taro.downloadFile({
      url: billInfo.value.pdfUrl,
      success: res => {
        // Taro.saveFile({
        //   tempFilePath: billInfo.value.pdfUrl,
        //   success: (res)=>{
        //     const savedFilePath = res.savedFilePath
        //   }
        // })
        Taro.openDocument({ //打开文档
          filePath: res.tempFilePath,//本地文档路径
          fileType: "pdf",//文档类型
          showMenu: true,
          success: function (res) {
          },
          fail: function (res) {
            Taro.showToast({
              title: '打开文档失败',
            })
          },
        })
      }
    })
  }
  else{
    Taro.showToast({
      icon: 'error',
      title: '下载发票异常'
    })
  }
}

//冲红发票
const handleReverse = ()=>{
  reverseReason.value = ''
  showReverse.value = true
}

const goback = ()=>{
  Taro.navigateBack()
}

const toOrderDetail = async (billNo)=>{
  const res: any = await $post(
      `/selfmachine-system/order/list`,
      {
        //customerCode: userStore.userInfo.customerCode,
        billNo
      }
  )
  if(res.data.rows && res.data.rows.length){
    orderStore.orderList = res.data.rows[0]
    Taro.navigateTo({
      url: "/pages/myOrder/order",
    })
  }
  else {
    Taro.showToast({
      icon: 'error',
      title: '未查询到运单'
    })
  }
}


const headHeight = ref(0)
const statusHeight = ref(0)
const bottonMargin = ref(0)

const getNavHeight = ()=>{
  let menuButtonObject = Taro.getMenuButtonBoundingClientRect(); //获取胶囊对象
  let sysinfo = Taro.getSystemInfoSync(); // 获取设备系统对象
  let statusBarHeight = sysinfo.statusBarHeight; // 获取状态栏高度
  let menuBottonHeight =  menuButtonObject.height; //获取胶囊本身高度
  let menuBottonTop =  menuButtonObject.top; // 获取胶囊距离顶部的高度
  headHeight.value = statusBarHeight + menuBottonHeight + (menuBottonTop - statusBarHeight) * 2 ; //计算nav导航栏的高度（上图蓝色线段的长度）
  statusHeight.value = statusBarHeight
  bottonMargin.value = menuBottonTop - statusBarHeight
}

getNavHeight()

useDidShow(async () => {
  const res: any = await $post(
      `/selfmachine-system/ssInvoice/invoiceDetails`,
      {
        ssiId: router.params.id,
        customerCode: userStore.userInfo.customerCode,
      }
  )
  if(res.data.code === 200){
    let info = res.data.data || {}
    info.billNoList = info.billNos ? info.billNos.split(',') : []
    billInfo.value = info
  }
})

</script>

<style lang="scss" >
// @import "xxx";
// @import url(xxx);
page {
  background-color: #f5f5f5;
}
.container {
  width: 100%;
  background-color: #f5f5f5;
  .head {
    position: fixed;
    z-index: 9999;
    top: 0;
    width: 100%;
    background-color: #0966ff;
    display: flex;
    align-items: center;
    justify-content: center;
    .back {
      position: absolute;
      left: 34rpx;
      color: #fff;
    }
    .title {
      font-size: 34rpx;
      color: #fff;
    }
  }
  .top_nav {
    background-color: #0966ff;
    width: 100%;
    height: 472rpx;
    border-bottom-left-radius: 100rpx 24rpx;
    border-bottom-right-radius: 100rpx 24rpx;
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    position: relative;
    .success_info {
      width: 100%;
      text-align: center;
      color: #fff;
      margin-bottom: 64rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      .text {
        font-size: 44rpx;
        font-weight: 600;
        line-height: 56rpx;
        margin-left: 20rpx;
      }
      image {
        width: 56rpx;
        height: 56rpx;
      }
    }
    .outlet {
      width: calc(100% - 50rpx);
      height: 30rpx;
      box-sizing: border-box;
      border: 6rpx solid #4189ff;
      background-color: #003081;
      margin-bottom: 70rpx;
      border-radius: 15rpx;
    }
  }
  .detail_box {
    width: 700rpx;
    margin-left: 25rpx;
    margin-top: -85rpx;
    border-radius: 16rpx;
    overflow: hidden;
    background-color: #fff;
    margin-bottom: 152rpx;
    padding-bottom: 48rpx;
    position: relative;
    z-index: 8888;
    .top {
      width: 100%;
      height: 40rpx;
      background: linear-gradient(180deg, #002053 -108%, rgba(0,32,83,0.00) 78%);
    }
    .row {
      width: 100%;
      box-sizing: border-box;
      padding: 0 34rpx;
      margin-top: 24rpx;
      display: flex;
      .label {
        width: 144rpx;
        font-size: 26rpx;
        font-weight: 500;
        line-height: 40rpx;
        color: #999;
      }
      .value {
        width: calc(100% - 144rpx);
        font-size: 26rpx;
        font-weight: 500;
        line-height: 40rpx;
        color: #252525;
        .orders {
          display: flex;
          align-items: center;
          .order_detail {
            font-size: 22rpx;
            color: #999;
            margin-left: 32rpx;
          }
        }
      }
    }
    .cancel {
      width: calc(100% - 68rpx);
      height: 88rpx;
      border-radius: 44rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      border: 1rpx solid #c4c4c4;
      font-size: 32rpx;
      color: #252525;
      margin-top: 48rpx;
      margin-left: 34rpx;
      &.red {
        margin-top: 32rpx;
      }
    }
    .downloand {
      width: calc(100% - 68rpx);
      height: 88rpx;
      border-radius: 44rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      font-size: 32rpx;
      color: #fff;
      background-color: #0966ff;
      margin-top: 48rpx;
      margin-left: 34rpx;
    }
  }
}

</style>
